<template>
  <section ref="refChart" class="chart_wrap" :class="className" :style="{ height: height, width: width }"></section>
</template>

<script setup>
import { onMounted, onBeforeUnmount, ref, watch, nextTick } from 'vue'
import * as echarts from 'echarts';
import {getRadarChartData} from '@/api/screen/screen.js';

/**
 * 父组件参数
 */
const props = defineProps({
  className: {
    type: String,
    default: 'chart'
  },
  width: {
    type: String,
    default: '100%'
  },
  height: {
    type: String,
    default: '100%'
  },
  chartFontColor: {
    type: String,
    default: '#000'
  },
  autoResize: {
    type: Boolean,
    default: true
  },
  chartData: {
    type: Object,
    required: true
  },
  txtFontSize: {
    type: Number,
    default: 15
  }
})

/**
 * 定义变量
 */
let myChart = null // 图表
const refChart = ref(null) // 图表ref

/**
 * 监听数据
 */
watch(
  props.chartData,
  (val) => {
    setOption(val)
  },
  { deep: true }
)

/**
 * 方法
 */
/**
 * 工具方法
 */
const setProxyData = (proxyData) => JSON.parse(JSON.stringify(proxyData))

/**
 * 图表相关
 */
// 销毁图表
const destroyChart = (next) => {
  if (myChart) {
    myChart.dispose()
    myChart = null

    if (next) {
      next()
    }
  }
}
// 重置图表
const resetChart = () => {
  // console.log("初始化图表", myChart)

  destroyChart(() => {
    // 重新启动图表
    initChart()
  })
}
// 初始化图表
const initChart = () => {
  myChart = echarts.init(refChart.value, 'macarons')
  // setOption(props.chartData)
  window.onresize = function () {
    // 自适应大小
    myChart.resize()
  };
  getData();
}


//获取图表数据
const networkEnvScore = ref();
const networkAlarmScore = ref();
const networkProfitScore = ref();
const networkPerceptionScore = ref();
const networkQualityScore = ref();

async function getData(){
  await getRadarChartData().then(res => {
    networkEnvScore.value = res.data.envAvgScore;
    networkAlarmScore.value = res.data.alarmAvgScore;
    networkProfitScore.value = res.data.profitAvgScore;
    networkPerceptionScore.value = res.data.perceptionAvgScore;
    networkQualityScore.value = res.data.qualityAvgScore;
  })

  drawChart();
}


function drawChart(){
  var option = {
      legend: {         
        orient: 'vertical', 
        align: 'left',
        left: 'left',
        textStyle:{
          color:"#fff"
        },
	    },
    //   tooltip : {
    //  //雷达图的tooltip不会超出div，也可以设置position属性，position定位的tooltip 不会随着鼠标移动而位置变化，不友好
    //     confine: true,
    //     enterable: true, //鼠标是否可以移动到tooltip区域内
    //  },
      radar: {
        splitNumber: 5,
        indicator: [  //配置各个维度的最大值
          { name: '基站环境', max: 100},
          { name: '故障告警', max: 100},
          { name: '站点价值', max: 100},
          { name: '用户感知', max: 100},
          { name: '网络质量', max: 100}
        ],
        axisLine: {  // 设置雷达图中间射线的颜色
            lineStyle: {
                color: '#c0c0c0',
            },
        },
        name:{ //修改indicator文字的颜色
                  textStyle:{
                      color:"#fff"
                  }
              }
      },
      series: [
        {
          type: 'radar',
          animation: true,
          data: [{
            name:"当日各维度平均分",
            value:[networkEnvScore.value , networkAlarmScore.value ,networkProfitScore.value ,networkPerceptionScore.value ,networkPerceptionScore.value ,networkQualityScore.value ],
            itemStyle:{
              normal:{
                color: 'rgba(0, 206, 228,.5)', //背景颜色，还需设置areaStyle
                lineStyle: {
                    color: 'rgba(0, 206, 228,.5)', //边框颜色
                },
              }
            },
            label: {  //显示value中具体的数值
                normal: {
                    show: true,
                    textStyle:{  //更改数值样式
                        color:'#00CEE4'
                    }
                },
            },
            areaStyle: { //设置区域背景颜色透明度
                normal: {
                    width: 1,
                    opacity: 0.8,
                },
            },            
          }]
        },
      ]
    };
  myChart.setOption(option);
}

// 设置图表
const setOption = ({ fieldData, yData } = {}) => {
  // 绘制图表
 

}

/**
 * 生命周期
 */
onMounted(() => {
  nextTick(() => {
    initChart() // 初始化图表
  })
})
onBeforeUnmount(() => {
  destroyChart() // 销毁图表
})

/**
 * 暴露方法
 */
defineExpose({
  resetChart
})
</script>

<style lang="scss" scoped>
.chart_wrap {
  min-height: 100px;
  padding: 10px;
}
</style>
